<template>
  <div class="form-wrap" >
    <BasicForm
    style="width: 800px;"
      :labelWidth="100"
      :schemas="schemas"
      :actionColOptions="{ span: 24}"
      :baseColProps="{ span: 24 }"
      @submit="handleSubmit"
      class="vertical-form"
      :showSubmitButton="false"
      :showResetButton="false"
    >
      <template #f8="{ model, field, disabled }">
        <SeatSelector :value="model[field]" :disabled="disabled" ref="seatSelector" />
      </template>
      <template #formFooter>
          <div class="footer-wrap">
            <a-button class="back-btn">返回</a-button>
            <a-button type="primary" html-type="submit">提交</a-button>
          </div>
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts" setup>
import { BasicForm } from '@/components/Form';
import { useMessage } from '@/hooks/web/useMessage';
import { schemas } from './data';
import { ref } from 'vue';
import SeatSelector from './components/SeatSelector.vue';

  const { createMessage } = useMessage();
  const seatSelector = ref();
  function handleSubmit(values: any) {
    createMessage.success('click search,values:' + JSON.stringify(values));
  }
</script>
<style lang="less" scoped>
::v-deep .vditor{
  width: 1400px !important;
}
::v-deep .ant-form-item-control-input{
  width: 100%;
}
.form-wrap {
  padding: 24px;
  background-color: @component-background;
  overflow: auto;
    .vertical-form .ant-form-item {
      display: block;
      margin-bottom: 15px;
    }
    .footer-wrap {
      display: flex;
      margin: auto;
      align-items: center;
      .back-btn {
        margin-right: 10px;
      }
  }
}
</style>